<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style=" width: 800px; margin-top: 60px;">

    <el-form-item label="封面介绍图:">
      <el-upload class="avatar-uploader" action="/file/upload" name = "fileData" :on-success="handleUploadSuccess"
                 :multiple="false" :show-file-list="false">
        <img v-if="ruleForm.cover_url" :src="ruleForm.cover_url" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>

    <el-form-item label="详情介绍图:">
      <el-upload class="avatar-uploader" action="/file/upload" name = "fileData" :on-success="handleDetailUploadSuccess"
                 :multiple="false" :show-file-list="false">
        <img v-if="ruleForm.detail_url" :src="ruleForm.detail_url" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>



    <el-form-item label="1*1介绍图:">
      <el-upload class="avatar-uploader" action="/file/upload" name = "fileData" :on-success="handleSmallUploadSuccess"
                 :multiple="false" :show-file-list="false">
        <img v-if="ruleForm.small_url" :src="ruleForm.small_url" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>






    <el-form-item label="课程名称:" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>



    <el-form-item label="是否开放" prop="is_open" >
      <el-radio-group v-model="ruleForm.is_open">
        <el-radio :label=1>是</el-radio>
        <el-radio :label=0>否</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="分组">
      <el-select v-model="selectedList" multiple placeholder="请选择">
        <el-option
          v-for="period in periodList"
          :key="period.id"
          :label="period.name"
          :value="period.id">
        </el-option>
      </el-select>
    </el-form-item>




    <el-form-item label="主题" prop="subject_id">
      <el-select v-model="ruleForm.subject_id" placeholder="请选择">
        <el-option
          v-for="item in subject_options"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>


    <el-form-item label="起始时间:">
      <el-date-picker v-model="ruleForm.start_time" format="yyyy-MM-dd" type="date"
                      value-format="yyyy-MM-dd" placeholder="选择日期时间" size="mini">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="终止时间:">
      <el-date-picker v-model="ruleForm.end_time" format="yyyy-MM-dd" type="date"
                      value-format="yyyy-MM-dd" placeholder="选择日期时间" size="mini">
      </el-date-picker>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>

  export default {
    data() {
      return {
        subject_options:[],
        selectedList:[],
        periodList:[],
        ruleForm: {
          id:this.$route.query.course_id,
          name: '',
          cover_url:'',
          detail_url:'',
          small_url:'',
          is_open:0,
          periods_str:'',
          subject_id:'',
          start_time:'',
          end_time:''
        },
        rules: {
          name: [
            { required: true, message: '请输入班级名称', trigger: 'blur' },
            { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
          ],
          subject_id: [
            { required: true, message: '请选择主题类型', trigger: 'blur' }
          ]
        },
      };
    },
    mounted: function () {
       this.loadSubjects();
       this.loadCourse();
       this.loadPeriodList();
    },

    methods: {

      loadPeriodList(){
        var _this = this;
        this.tableLoading = true;
        this.getRequest("/period/list?page=1&size=1000").then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.periodList = data.data.arrays;
          }
        })
      },

      submitForm(formName) {
        var _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var _this = this;
            this.tableLoading = true;
            var periods_str = JSON.stringify(this.selectedList);
            _this.ruleForm.periods_str =  periods_str;
            this.postRequest("/course/modifyCourse",_this.ruleForm).then(resp=> {
              this.tableLoading = false;
              if (resp && resp.status == 200) {
                var data = resp.data;
                _this.$message({type: data.status, message: data.msg});
              }
            })
          } else {
            //console.log('error submit!!');
            return false;
          }
        });
      },
      loadSubjects(){
        var _this = this;
        this.tableLoading = true;
        this.postRequest("/subject/list").then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.subject_options = data.data.arrays;
          }
        })
      },


      loadCourse(){
        var _this = this;
        this.tableLoading = true;
        this.postRequest("/course/get",{id:this.$route.query.course_id}).then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data.data.data;
            _this.ruleForm.name = data.name;
            _this.ruleForm.detail_url = data.detail_url;
            _this.ruleForm.cover_url = data.cover_url;
            _this.ruleForm.small_url = data.small_url;
            _this.ruleForm.subject_id = data.subject_id;
            _this.ruleForm.start_time = data.start_time;
            _this.ruleForm.end_time = data.end_time;
            _this.ruleForm.is_open =data.is_open;
            if(data.periods != null){
              for (var ind=0;ind<data.periods.length;ind++) {
                _this.selectedList.push(data.periods[ind].id)
              }
            }
          }
        })
      },



      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleUploadSuccess(res, file) {
        this.ruleForm.cover_url = res.url;
      },

      handleDetailUploadSuccess(res, file){
        this.ruleForm.detail_url = res.url;
      },
	    handleSmallUploadSuccess(res,file) {
      	this.ruleForm.small_url = res.url;
      }
    }
  }
</script>
